<template>
  <PageWrapper>
    <Row>
      <Col :xl="6">
        <div class="bg-white p-2">
          <Row class="m-2">
            <a-input-search
              v-model:value="barCodeParams"
              placeholder="姓名/体检号/身份证"
              enter-button
              @search="onPhysicalList"
            />
          </Row>
          <Row class="m-2">
            <InputGroup compact>
              <Select ref="select" style="width: 110px" placeholder="自定义">
                <SelectOption value="今日">今日</SelectOption>
                <SelectOption value="本周">本周</SelectOption>
                <SelectOption value="本月">本月</SelectOption>
                <SelectOption value="三月内">三月内</SelectOption>
              </Select>
              <RangePicker :presets="rangePresets" @change="onRangeChange" />
            </InputGroup>
          </Row>
          <Row class="m-0">
            <div class="scroll-wrap">
              <ScrollContainer ref="scrollRef">
                <List :data-source="physicalList" size="mini" :loading="physicalLoading">
                  <template #renderItem="{ item }">
                    <List.Item class="list" @click="onShowDetail(item)">
                      <List.Item.Meta>
                        <template #title>
                          <Row>
                            <Col :xl="12">
                              <span>{{ item.name }}</span>
                            </Col>
                            <Col :xl="6">
                              <div>
                                <Tag color="blue">{{ item.age }}岁</Tag></div
                              >
                            </Col>
                            <Col :xl="6">
                              <Tag color="pink" v-if="item.gender === '女'">
                                {{ item.gender }}
                              </Tag>
                              <Tag color="cyan" v-if="item.gender === '男'">
                                {{ item.gender }}
                              </Tag>
                            </Col>
                          </Row>
                        </template>
                        <template #description>
                          <div class="info">
                            <div><span>体检类型：</span>老年人体检</div>
                            <div><span>体检编号：</span>{{ item.barcode }}</div>
                            <div><span>身份证号：</span>{{ item.idCard }}</div>
                          </div>
                        </template>
                      </List.Item.Meta>
                    </List.Item>
                  </template>
                </List>
              </ScrollContainer>
            </div>
            <div class="p-2">
              <Pagination v-model:current="currentPage" :total="totalCount" />
            </div>
          </Row>
        </div>
      </Col>
      <Col :xl="18">
        <div style="height: 723px" class="bg-white p-2 m-l-2">
          <div v-if="physicalSingle">
            <Row :xl="4" class="p-4">
              <Space>
                <strong>{{ physicalSingle.name }} </strong>
                <Divider type="vertical" />
                <Tag color="cyan">
                  <template #icon>
                    <Icon icon="ant-design:man-outlined" color="blue" size="14" />
                  </template>
                  {{ physicalSingle.gender }}
                </Tag>
                <Tag color="cyan">
                  <template #icon>
                    <Icon icon="ant-design:calendar-outlined" size="14" />
                  </template>
                  89岁
                </Tag>
                <Tag color="cyan">
                  <template #icon>
                    <Icon icon="ant-design:field-number-outlined" size="14" />
                  </template>
                  {{ physicalSingle.barcode }}
                </Tag>
                <Tag color="cyan">
                  <template #icon>
                    <Icon icon="ant-design:user-outlined" size="14" />
                  </template>
                  老年人体检
                </Tag>
                <Tag color="cyan">
                  <template #icon>
                    <Icon icon="ion:md-card" size="14" />
                  </template>
                  {{ physicalSingle.idCard }}
                </Tag>
              </Space>
            </Row>
            <Row :xl="20">
              <Col :xl="18">
                <div class="p-2 edit-scroll">
                  <ValueItem :itemData="projectList" :deptInfo="nodeName" />
                </div>
              </Col>
              <Col :xl="6">
                <div class="p-4">
                  <BasicTree title="科室组合" :treeData="tcDeptList" @select="handleDeptSelect">
                    <template #icon>
                      <Icon icon="ant-design:caret-left-filled" size="16" color="#108ee9"
                    /></template>
                  </BasicTree>
                </div>
              </Col>
            </Row>
          </div>
          <Empty
            v-else
            :description="null"
            :image-style="{
              height: '600px',
            }"
          />
        </div>
      </Col>
    </Row>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import dayjs from 'dayjs';

  import { PageWrapper } from '@/components/Page';
  import { BasicTree } from '@/components/Tree';
  import { ScrollContainer, ScrollActionType } from '@/components/Container';
  import Icon from '@/components/Icon/Icon.vue';
  import {
    Row,
    Col,
    RangePicker,
    List,
    Tag,
    Space,
    Divider,
    Pagination,
    Empty,
    Select,
    InputGroup,
  } from 'ant-design-vue';
  import ValueItem from '@/views/peis/hand-input/components/ValueItem.vue';
  import { getPhysicalList, queryByBarcode, queryByTcId } from '@/api/peis/peis';
  import { PhysicalListParams } from '@/api/peis/model/peis';

  onMounted(() => {
    // 在这里可以执行一些需要在组件挂载后执行的逻辑
    onPhysicalList();
  });
  const physicalLoading = ref(false);
  const totalCount = ref();
  const currentPage = ref(1);
  const scrollRef = ref<Nullable<ScrollActionType>>(null);
  const beginDateParams = ref();
  const endDateParams = ref();
  const barCodeParams = ref();
  // 时间选择
  const onRangeChange = (dateValue: [dayjs, dayjs], dateStr: [string, string]) => {
    beginDateParams.value = dateStr[0];
    endDateParams.value = dateStr[1];
    onPhysicalList();
  };
  const physicalList = ref([]);
  const tcDeptList = ref([]);
  const physicalSingle = ref(null);
  const projectList = ref([]);
  const nodeName = ref();
  function onPhysicalList() {
    physicalLoading.value = true;
    let params: PhysicalListParams = {
      barcode: barCodeParams.value,
      isDeleted: '0',
      createTimeFrom: beginDateParams.value,
      createTimeTo: endDateParams.value,
      params: {
        page: String(1),
        limit: String(10),
      },
    };
    getPhysicalList(params)
      .then((res) => {
        totalCount.value = res.totalCount;
        physicalList.value = res.list;
      })
      .finally(() => {
        physicalLoading.value = false;
      });
  }
  function handleDeptSelect(value, node) {
    nodeName.value = node.selectedNodes[0].name;
    onQueryByBarcode(value[0]);
  }
  function onQueryByBarcode(value) {
    let params = { barcode: physicalSingle.value.barcode, zuheId: value, sex: 'DM01-08_1' };
    queryByBarcode(params).then((res) => {
      projectList.value = res.projectList;
    });
  }
  function onShowDetail(detail) {
    physicalSingle.value = detail;
    queryByTcId({ tcId: '1' }).then((res) => {
      tcDeptList.value = [];
      let resData = res.list;
      onQueryByBarcode(resData[0].id);
      nodeName.value = resData[0].girlicious;
      resData.forEach((ele) => {
        tcDeptList.value.push({
          key: ele.id,
          name: ele.girlicious,
          title: ele.girlicious,
        });
      });
    });
  }
  const rangePresets = ref([
    { label: '当天', value: [dayjs(), dayjs()] },
    { label: '本周内', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: '两周内', value: [dayjs().add(-14, 'd'), dayjs()] },
    { label: '本月', value: [dayjs().add(-30, 'd'), dayjs()] },
    { label: '三月内', value: [dayjs().add(-90, 'd'), dayjs()] },
  ]);
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 100%;
    height: 570px;
    background-color: @component-background;
  }
  .edit-scroll {
    width: 100%;
    height: 620px;
  }
</style>
